<script setup>
import { reactive } from "@vue/reactivity";

const option = reactive({
  legend: {
    data: ['学习时长']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '7%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ["周日", "周一", "周二", "周三", "周四", "周五","周六"],
  },
  yAxis: {
    type: "value",
  },
  series: [{
    data: [3.6, 7.1, 8.2, 4.5, 5.6, 2.1, 3.0, 2.8],
    name: '学习时长',
    type: 'line',
    stack: 'Total',
  }],
});

const updateData = () => {
  option.series.data = [120, 10, 50, 380, 70, 210, 230]; //可以

  // option.series = {
  //   data: [120, 10, 50, 380, 70, 210, 230],
  // }; //也可以
};
</script>

<template>
  <div style="width: 24rem; height: 20rem; background: white">
    <p style="margin-left: 10%;">每周学习时长</p>
    <v-chart :option="option" autoresize :loading="false"/>
<!--    <button @click="updateData">更新数据</button>-->
  </div>
</template>

<style scoped>

</style>
